<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>排行榜</title>
    <script src="../js/bianliang.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            var openId;

            $.getJSON("/map/getConfig/", function (json) {
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx867c24e052e82c57', // 必填，公众号的唯一标识
                    timestamp: json.timeStamp, // 必填，生成签名的时间戳
                    nonceStr: json.nonceStr, // 必填，生成签名的随机串
                    signature: json.signature,// 必填，签名
                    jsApiList: [
                        'openLocation',
                        'getLocation'
                    ] // 必填，需要使用的JS接口列表，所有JS接口列表见官方文档附录2
                });
                wx.ready(function () {
                    console.log("this is ready");
                    getLocation();
                });
                wx.error(function (res) {
                    console.log("this is error");
                });
            });

            $.getJSON("/map/getOpenId/", function (json) {
                openId = json.openId;
                var user = {
                    openId: openId
                };
                $.ajax({
                    type: "get",
                    url: urlUserCenter+"/user/getUserByOpenId",
                    data: user,
                    dataType: "json",
                    success: function (data) {
                        var clazzId=data.clazzId;
                            $.ajax({
                                type: "get",
                                url: urlUserCenter+"/user/getUserByClazzId/" + clazzId,
                                data: {
                                    id: clazzId,
                                },
                                dataType: "json",
                                success: function (data) {

                                    var userIds=new Array();
                                    for(var i in data){
                                        userIds.push(data[i].id);
                                    }
                                    $.ajax({
                                        type:"get",
                                        url:"/ability/getRanking",
                                        traditional: true,//这里设置为true
                                        data:{
                                            "userIds":userIds
                                        },
                                        dataType:"json",
                                        success:function (data1) {
                                            var ranking = data1.ranking;
                                            for (var i in ranking) {
                                                var userName = ranking[i].userName;
                                                var sort=ranking[i].sort;
                                                $("#ranking").append("<tr><td>"  + userName + " </td><td>"  + sort + "</td></tr>");
                                            }
                                        }
                                    })

                                },
                                error: function (err) {
                                    console.log(err);
                                }
                            })
                        }
                })
            });


        });
    </script>
</head>
<body>

<div>
    <div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">
        <img src="../img/ranking.png" height="100%" width="100%"/>
    </div>
    <div class="main">

        <h1>排行榜</h1>
        <div style="text-align:center">

            <table id="ranking" border="1" style="font-size:18px;font-family:serif;" cellpadding="5">
                <tr>
                    <th class="head0">用户名</th>
                    <th class="head1">完成度排名</th>
                </tr>
            </table>

        </div>

    </div>
</div>

</body>

<style>
    .main{
        text-align: center; /*让div内部文字居中*/
        border-radius: 20px;
        width: 300px;
        height: 350px;
        margin: auto;
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        bottom: 0;
    }
    td
    {
        text-align:center;
    }


</style>

</html>